<template>
	<div class="stickers_com">
		<div class="sticker_con">
			<div class="sticker_item"
				v-for="(sticker_item, sticker_index) in stickerList" :key="sticker_index">
				<div :style="stickerConStyle">
					<div :style="stickerStyle(item, index)" v-for="(item, index) in sticker_item.list" :key="index">
						<img style="width: 100%; height: 100%;" :src="item.material_url" alt="" />
					</div>
				</div>
				<div class="operate_con">
					<span>贴纸_{{sticker_index + 1}}</span>
					<FormOutlined class="operate_icon" @click="addThisSticker(sticker_item)" />
					<DeleteOutlined @click="deleteSticker(sticker_index)" class="operate_icon" />
				</div>
			</div>
			<div class="right_add" @click="addThisSticker">
				<PlusOutlined />
				添加贴纸
			</div>
		</div>
		<addStickers :visible="addVisible" @close="closeAdd" :stickerObj="stickerObj" />
	</div>
</template>

<script>
	import {
		defineComponent,
		ref,
		reactive,
		toRefs,
		computed,
		watch
	} from "vue";
	import {
		PlusOutlined,
		FormOutlined,
		DeleteOutlined,
	} from "@ant-design/icons-vue";
	import addStickers from "./addStickers.vue";
	import store from '@/store';
	export default defineComponent({
		components: {
			PlusOutlined,
			addStickers,
			FormOutlined,
			DeleteOutlined,
		},
		setup(props, context) {
			const state = reactive({
				addVisible: false,
				stickerList: [],
				stickerObj: {}
			});
			
			const addThisSticker = (obj) => {
				if(obj){
					state.stickerObj = obj
				} else {
					state.stickerObj = {}
				}
				state.addVisible = true
			};
			
			const closeAdd = (obj) => {
				if(!obj) {
					state.addVisible = false;
					return
				}
				if(obj){
					let index = state.stickerList.findIndex(item=>item.name == obj.name)
					if(index == -1){
						state.stickerList.push(obj)
					} else {
						state.stickerList[index] = obj
					}
				}
				state.stickerObj = {}
				state.addVisible = false
				submitStuctrue()
			};
			
			const deleteSticker = (index) => {
				state.stickerList.splice(index, 1)
				submitStuctrue()
			}
			
			const submitStuctrue = () => {
				let submitList = []
				state.stickerList.map((parent_item, parent_index)=>{
					let parentList = []
					parent_item.list.map((item, index)=>{
						let submitData = {}
						if(parent_index==0 && index == 0){
							submitData['originData'] = state.stickerList
						}
						submitData['html'] = `<img src="${item.material_url}" />` // 必须
						submitData['css'] = `img {width: ${item.width}px; height: ${item.height}px; opacity: ${item.opacity}}` // 必须
						submitData['material_url'] = item.material_url
						submitData['scene_type'] = 'sticker'
						submitData['config'] = {}
						submitData['config']['width'] = item.width
						submitData['config']['height'] = item.height
						submitData['config']['scale'] = Number((item.width / item.originWidth).toFixed(3))
						submitData['config']['opacity'] = item.opacity
						submitData['config']['x'] = Number(((item.elLeft + (item.width/2) - 180)/360).toFixed(3))
						let radioHeight = radioType.value == '1:1'?360:radioType.value == '16:9'?202.5:640
						submitData['config']['y'] = Number(((radioHeight/2 - (item.elTop + (item.height/2)))/radioHeight).toFixed(3))
						submitData['config']['transition_in'] = item.transitionKey['in']
						submitData['config']['transition_out'] = item.transitionKey['out']
						submitData['config']['effect'] = item.specialKey
						submitData['config']['start'] = item.start_time
						submitData['config']['length'] = item.end_time
						parentList.push(submitData)
					})
					submitList.push(parentList)
				})
				store.dispatch('SetClipJSONSticker', submitList)
				context.emit('updateNumber', {
					type: 'sticker',
					count: state.stickerList.length
				})
			}
			
			const radioType = computed(()=>store.getters.clipJSON?.aspect_ratio)
			
			const stickerConStyle = computed(()=>{
				return {
					position: 'relative',
					backgroundImage: `url('https://hf.pigcms.com/static/wxapp/images/phone_black_back.png')`,
					backgroundSize: '100% auto',
					backgroundPosition: 'center center',
					backgroundRepeat: 'no-repeat',
					width: 360/2 + 'px',
					height: radioType.value == '1:1'?360/2+'px':radioType.value == '16:9'?202.5/2+'px':640/2+'px'
				}
			})
			
			const stickerStyle = computed(() => {
				return function(item, index) {
					return {
						'position': 'absolute',
						'left': item.elLeft/2 + 'px',
						'top': item.elTop/2 + 'px',
						'width': item.width/2 + 'px',
						'height': item.height/2 + 'px',
						'opacity': item.opacity,
						'display': 'flex',
						'align-items': 'center',
						'justify-content': 'center'
					}
				}
			})
			
			watch(()=>store.getters.clipJSON?.sticker_config, val=>{
				if(state.addVisible) return
				if (val?.length === 0) {
					state.stickerList = [];
					context.emit('updateNumber', {
						type: 'sticker',
						count: state.stickerList.length
					})
					return;
				};
			
				if(val?.length && val[0][0]?.originData){
					state.stickerList = val[0][0]?.originData
					context.emit('updateNumber', {
						type: 'sticker',
						count: state.stickerList.length
					})
				}
			},{
				deep: true,
				immediate: true
			})
			
			return {
				addThisSticker,
				closeAdd,
				stickerStyle,
				deleteSticker,
				radioType,
				stickerConStyle,
				...toRefs(state),
			};
		}
	});
</script>

<style lang="less" scoped>
	.stickers_com {
		.sticker_con {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.sticker_item {
				border-radius: 5px;
				width: 180px;
				min-height: 320px;
				background-color: #000;
				// border: 1px solid #646464;
				margin-top: 30px;
				margin-left: 10px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				background-position: center;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				position: relative;

				&:hover {
					.operate_con {
						.operate_icon {
							display: block;
						}
					}
				}

				.operate_con {
					position: absolute;
					width: 100%;
					height: 35px;
					display: flex;
					align-items: center;
					justify-content: center;
					left: 0;
					bottom: -35px;

					.operate_icon {
						display: none;
						margin-left: 10px;
						cursor: pointer;
						color: #fff;
					}
				}
			}

			.right_add {
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #999;
				margin-left: 10px;
				margin-top: 30px;

				width: 180px;
				min-height: 320px;
				background-color: #343434;
				border: 1px solid #646464;
				border-radius: 6px;
				cursor: pointer;
			}
		}
	}
</style>